<template>
  <h1>App</h1>
  <ul>
    <li>
      <RouterLink to="/home">Home</RouterLink>
    </li>
    <li>
      <RouterLink to="/shop/100">Shop/100</RouterLink>
    </li>
  </ul>
  <h2>shop</h2>
  <h3>state</h3>
  {{ shopStore.title }}
  <h3>getters</h3>
  {{ shopStore.g1 }}
  <h3>actions</h3>
  {{ shopStore.add(100, 200) }}


  <!-- ---------- -->
  <h2>cart</h2>
  <h3>state</h3>
  {{ cartStore.title }}
  <h3>getters</h3>
  {{ cartStore.g1 }}
  <h3>actions</h3>
  {{ cartStore.add(300, 200) }}

  <RouterView></RouterView>
</template>

<script setup>

import { useShopStore, useCartStore } from './store/s1.js';

const shopStore = useShopStore();
const cartStore = useCartStore();


</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>